<template>
	<view class="bg">
		<view class="headImg_bg">
			<view class="headImg">
				<image src="/static/index/logo.png" mode=""></image>
			</view>
		</view>
		<view class="body">
			<view class="body_item">
				<image class="left_img" src="../../../static/index/ren.png" mode=""></image>
				<input type="text" value="" placeholder="手机号/邮箱" maxlength="30" v-model="loginName" />
				<image class="delete" src="../../../static/index/delete.png" @tap="deleteNum('log')" mode=""></image>
			</view>
			<view class="body_item" v-if="loginWay=='password'">
				<image class="left_img" src="../../../static/index/mima.png" mode=""></image>
				<input type="text" value="" placeholder="密码登录" maxlength="30" v-if="showPass" v-model="password" />
				<input type="password" value="" placeholder="密码登录" maxlength="30" v-else v-model="password" />
				<image class="delete" src="../../../static/index/delete.png" @tap="deleteNum('pass')" mode=""></image>

				<image class="showOrHide" src="../../../static/index/chakan.png" mode="" v-if="showPass" @tap="toHidePass"></image>
				<image class="showOrHide" src="../../../static/index/yincang.png " mode="" v-else @tap="toShowPass"></image>
			</view>
			<view class="body_item" v-if="loginWay=='code'">
				<image class="left_img" src="../../../static/index/xinxi.png" mode=""></image>
				<input type="number" value="" placeholder="验证码" maxlength="30" v-model="code" />
				<view class="borderBox">
				</view>
				<text class="getyanzhengma" @tap="getCode" v-if="showGetCode">获取验证码</text>
				<text class="getyanzhengma" v-else>{{time}}秒</text>
			</view>
		</view>
		<view class="btn loginbtn">
			<view @tap="logout">取消登录</view>
			<view @tap="login">登录</view>
		</view>
		<view class="log_type_box">
			<view class="log_type" v-if="loginWay=='password'">
				<text @tap="switchLoginWay('password')">验证码登录</text>
				<text @tap="toforgetPass">忘记密码</text>
			</view>
			<view class="log_type" v-else-if="loginWay=='code'">
				<text @tap="switchLoginWay('code')">密码登录</text>
			</view>
			<view class="register" @tap="toRegister">
				手机号注册
			</view>
		</view>
		<view class="third_party">
			<view class="border-big">
				<view class="border-box"></view>
				<text>第三方登录</text>
				<view class="border-box"></view>
			</view>

			<button open-type="getUserInfo" plain="true" style=" width:50px; height:45px;border: none; background-clip: padding-box;"
			 @getuserinfo="getUserInfo">
				<image class="weixinImg" src="/static/index/weixinGray.png" mode=""></image>
			</button>
		</view>
		<view class="body_bottom">
			注册/登录即代表同意<text @tap="toWebview('user')">《Q陌用户协议》</text>和<text @tap="toWebview('privacy')">《Q陌隐私政策》</text>
		</view>
		<view class="">
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				keyupFns: false,
				showPass: false,
				loginWay: 'password', //登录方式
				passType: 'password', //密码显示状态
				showGetCode: true, //点没点获取验证码
				loginName: '', //账号
				code: "", //验证码
				password: '', //密码
				isCode: true,
				time: 59,
				list: [], //通讯录
				// canIUse: wx.canIUse('button.open-type.getUserInfo')
			};
		},
		onBackPress() {
			if (this.showMask) {
				this.showMask = false;
				return true;
			} else {
				uni.showModal({
					title: '提示',
					content: '是否退出应用？',
					success: function(res) {
						if (res.confirm) {
							// 退出当前应用，改方法只在App中生效  
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true
			}
		},
		onLoad() {	
			wx.getSystemInfo({
				success(res) {
					console.log(res, '...')
				}
			})
		},
		methods: {
			// getUserInfo(res) {
			// 	console.log(res)
			// },
			getPhoneNumber(res) {
				console.log(res)
			},
		
			getUserInfo: function(res) {
				var me = this
				var info = res
				if (info.detail.userInfo) {
					uni.setStorageSync('avatar', info.detail.userInfo.avatarUrl)
					uni.setStorageSync('nick_name', info.detail.userInfo.nickName)
					let avatar = info.detail.userInfo.avatarUrl
					let nickName = info.detail.userInfo.nickName
					uni.login({
						success: function(res) {
							me.myAjaxNewPost({
								model: 'user',
								controllerName: 'user',
								actionName: 'openIdVerification',
								data: {
									wx_code: res.code
								},
								successBack: function(myRes) {
									console.log('登录：：：：', myRes.data.data.result)
									if (myRes.data.data.result) {

										uni.navigateTo({
											url: '../register/register?avatar=' + avatar + '&nickName=' + nickName + '&openid=' + myRes.data.data.opend_id})
									} else {
										uni.setStorageSync('user_id', myRes.data.data.userInfoEntity.user_id);
										console.log(myRes.data.data.userInfoEntity.user_id + '登录ID！')
										uni.setStorageSync('avatar', myRes.data.data.userInfoEntity.avatar);
										uni.setStorageSync('nick_name', myRes.data.data.userInfoEntity.nick_name);
										uni.setStorageSync('user_info', myRes.data.data.userInfoEntity);
										uni.setStorageSync('user_sign', myRes.data.data.userSign)
										var arr = myRes.data.data.userInfoEntity.hometown.split('·')
										uni.setStorageSync('countryName', arr[0])
										uni.switchTab({
											url: '/pages/tabBer/CrossBorder/CrossBorder'
										})
									}
								}
							})
						}
					})
				} else {
					console.log("点击了拒绝授权");
				}
			},
			keyupFn(e) {
				this.keyupFns = true
				console.log(this.keyupFns)
				// this.$refs.focusOn.focus()
				// console.log(this.$refs.focusOn)
			},
			toHidePass() { //隐藏密码
				this.showPass = false;
				this.passType = 'password';
			},
			toShowPass() { //显示密码
				this.showPass = true;
			},
			deleteNum(type) {
				if (type == 'log') {
					this.loginName = ''
				} else if (type == 'pass') {
					this.password = ''
				}
			},
			toRegister() {
				uni.navigateTo({
					url: "../register/register"
					// url: "../../My/hobby/hobby?select=zhuce"
					// url:'../shaixuan/shaixuan'
					// url:'/pages/Index/index?first=true'
					// url:'/pages/Other/tuijianfriend/tuijianfriend'
				})
			},
			switchLoginWay(type) { //验证码和密码登录切换
				if (type == 'password') {
					this.loginWay = 'code';
				}
				if (type == 'code') {
					this.loginWay = 'password';
				}
			},
			getCode() { //获取验证码
				if (this.loginName == '') {
					uni.showToast({
						title: '请输入手机号或邮箱',
						icon: 'none'
					})
				} else {
					if (this.loginName.indexOf('@') != -1) {
						this.sendEmailCode();
					} else {
						this.sendTelCode();
					}
				}
			},
			sendTelCode() { //发送手机验证码
				var data = {
					mobile: this.loginName,
					type: 'login'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'sms',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) { //返回成功
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			sendEmailCode() { //发送邮箱验证码
				var data = {
					mail: this.loginName,
					type: 'login'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'mail',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						console.log(res);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			computeTime() {
				var me = this;
				setInterval(function() {
					if (me.time > 0) {
						me.time--;
					} else {
						me.showGetCode = true;
						me.time = 59;
					}
				}, 1000)
			},
			toforgetPass() { //忘记密码
				uni.navigateTo({
					url: '/pages/Other/forgetPass/forgetPass'
				})
			},
			login() { //登录
				if (this.loginWay == 'password') { //密码
					if (this.loginName == '') {
						uni.showToast({
							title: '请输入手机号或邮箱',
							icon: 'none'
						})
						return;
					} else if (this.password == '') {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return;
					}
					var data = {
						login_name: this.loginName,
						login_pass: this.password,
						login_type: '1',
					}
				}
				if (this.loginWay == 'code') { //验证码
					console.log(this.code)
					if (this.loginName == '') {
						uni.showToast({
							title: '请输入手机号或邮箱',
							icon: 'none'
						})
						return;
					} else if (this.code == '') {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return;
					} else {
						var data = {
							login_name: this.loginName,
							verification_code: this.code,
							login_type: '2'
						}
					}
				}
				console.log(data);
				var me = this;
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'user',
					actionName: 'login',
					data: data,
					successBack: function(res) {
						console.log(res)
						// console.log(res.data.data.data.token)
						// console.log(res.data.data.data.nick_name);
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == '0') {
							if (res.data.data.userInfoEntity.nick_name !== null) {

							}
						
							uni.setStorageSync('user_id', res.data.data.userInfoEntity.user_id);
							console.log(res.data.data.userInfoEntity.cat_coin + '登录ID！')
							uni.setStorageSync('cat_coin', res.data.data.userInfoEntity.cat_coin);
							uni.setStorageSync('avatar', res.data.data.userInfoEntity.avatar);
							uni.setStorageSync('nick_name', res.data.data.userInfoEntity.nick_name);
							uni.setStorageSync('user_info', res.data.data.userInfoEntity);
							uni.setStorageSync('user_sign', res.data.data.userSign)
							// uni.setStorageSync('video_sign', res.data.data.uservideosign.urlSig)
							var arr = res.data.data.userInfoEntity.hometown.split('·')
							uni.setStorageSync('countryName', arr[0])
							uni.switchTab({
								// url: '/pages/Index/index'
								url: '/pages/tabBer/CrossBorder/CrossBorder'
							})
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							})
						}
					},
				})
			},
			logout(){
				uni.switchTab({
					url: '/pages/tabBer/CrossBorder/CrossBorder'
				})
			},
			toWebview(type) {
				uni.navigateTo({
					url: '../../../pages/Meet/newWebView/newWebView?type=' + type
				})
			},
		},
	}
</script>

<style scoped>
	.bg {
		background: #FFFFFF;
		height: 100%;
	}

	.headImg_bg {
		padding-top: 178upx;
	}

	.headImg {
		width: 136upx;
		height: 136upx;
		background: rgba(70, 206, 207, 1);
		border-radius: 50%;
		margin: 0 auto;
		overflow: hidden;

	}

	.headImg image {
		width: 136upx;
		height: 136upx;
		padding-top: 3upx;
	}

	.body {
		margin-top: 120upx;
	}

	.body_item {
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		align-items: center;
		padding: 20upx 24upx;
		margin-top: 17upx;
		font-size: 28upx;
		color: #333333;
	}

	.body_item input {
		width: 100%;
	}

	.left_img {
		width: 46upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.delete {
		width: 30upx;
		height: 25upx;
	}

	.showOrHide {
		width: 36upx;
		height: 30upx;
		margin-left: 30upx;
	}

	.loginbtn {
		margin-top: 80upx;
		background-color: #fff;
		border: none;
	}
	.btn{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.btn view{
		width: 45%;
		background-color: #46CECF;
		border-radius: 10px;
	}
	.btn view:nth-of-type(1){
		color: #999999;
		/* background-color: gray; */
		border: 1px solid #999999;
		background-color: #FFFFFF;
		
	}
	.log_type_box {
		position: relative;
	}

	.register {
		color: #46CECF;
		font-size: 32upx;
		position: absolute;
		left: 310upx;
		top: 0upx;
	}


	.log_type {
		display: flex;
		justify-content: space-between;
		padding: 0 24upx;
		margin-top: 60upx;
		font-size: 28upx;
		color: #666666;
	}

	.body_bottom {
		color: #999999;
		font-size: 20upx;
		position: absolute;
		bottom: 60upx;
		width: 100%;
		text-align: center;
	}

	.body_bottom text {
		color: #47CECF;
	}

	.getyanzhengma {
		width: 120px;
		display: flex;
		flex-direction: row-reverse;
	}

	.borderBox {
		height: 33upx;
		border-left: 1upx solid #E6E6E6;
	}

	.third_party {
		width: 100%;
		position: absolute;
		bottom: 170upx;
	}

	.border-big {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		font-size: 24upx;
		width: 100%;
		margin-bottom: 60upx;
	}

	.border-big text {
		padding: 0 10upx;
	}

	.border-box {
		height: 1upx;
		width: 230upx;
		border-bottom: 2upx solid #E6E6E6;
	}

	.weixinImg {
		width: 90upx;
		height: 90upx;
		position: absolute;
		left: 0upx;
		top: 0upx;
	}
</style>
